<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>Document</title>
</head>
<!-- 

        在控制台查看页面dom的时候为什么没有发现有key这个属性?
                因为key是特殊的属性,vue模板虚拟dom存在其属性,在模板渲染到页面之前vue处理销毁了key属性,所以我们在页面中真实dom中看不到key属性

                key:需要添加的是唯一标识


            vue中的key有什么作用?(key的内部原理)看图更清晰

                1.虚拟DOM中key的作用
                        key是虚拟DOM对象的标识,当状态中的数据发生变化时,Vue会根据[新数据]生成[新的虚拟DOM],
                        随后Vue进行[新虚拟DOM]与[旧虚拟DOM]的差异比较,比较规则如下:


                2.对比规则
                        (1).旧虚拟DOM中找到了与新虚拟DOM相同的key
                            ①.若虚拟DOM中的内容没变,直接使用之前的真实的DOM!
                            ②.若虚拟DOM中内容变了,则生成新的真实DOM,随后替换掉页面中之前的真实DOM
                        
                        (2).旧虚拟DOM中未找到与新虚拟DOM相同的key
                            创建新的真实DOM,随后渲染到页面

                3.用index作为key可能会引发的问题
                        1.若对数据进行:逆序添加、逆序删除等破坏顺序的操作:
                                        会产生没有必要的真实DOM更新===>界面效果没问题,但效率低
                        2.若结构中包含输入类的DOM
                                        会产生错误DOM更新===>界面有问题
                

                4.开发中如何选择key?
                        1.最好使用每条数据的唯一标识作为key,比如id、手机号、身份证号、学号等唯一值
                        2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作,仅用于渲染列表用于展示,使用index作为key是没有问题的



 -->

<body>
    <div id="root">
        <h2>人员列表(遍历数组)</h2>
        <ul>
            <li v-for="(item,index) in persons" :key="item.id">{{item.name}}-{{item.age}} <input type="text"></li>
        </ul>
        <button @click.once="add">添加老刘的信息</button>
    </div>
    <script>
        Vue.config.productionTip = false; //以阻止vue在启动时生成生产提示
        new Vue({
            el: "#root",
            data: {
                persons: [{
                        id: "001",
                        name: "张三",
                        age: 18
                    },
                    {
                        id: "002",
                        name: "李三",
                        age: 19
                    },
                    {
                        id: "003",
                        name: "王三",
                        age: 20
                    },
                ]
            },
            methods: {
                add() {
                    let p = {
                        id: '004',
                        name: "老刘",
                        age: 40
                    }
                    this.persons.unshift(p) //开头加一个内容
                },
            }
        })
    </script>

</body>

</html>